<template>
	<div class="modify">
		<div class="head">
			<router-link tag="div" to="/security" class="rou"><</router-link>
			<div class="zl">修改密码</div>
		</div>
		<div class="con">
			<div><input type="text" v-model="dqpwd" placeholder="请输入当前密码"/></div>
			<div><input type="text" v-model="xdpwd" placeholder="请输入新密码"/></div>
		</div>
		<div class="bot">
			<div class="co">6~20位字母数字组合</div>
			<div class="btn" @click="demo">确定</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:"modify",
		data(){
			return{
				dqpwd:"",
				xdpwd:""
			}
		},
		methods:{
			demo(){
				this.$axios.post("http://127.0.0.1:3000/login",{
					username:localStorage.getItem("username"),
					password:this.dqpwd
				})
				.then(res => {
					if(res.data.msg=="登录失败"){
						alert("当前密码错误,请重新输入");
					}else{
						this.$axios.post("http://127.0.0.1:3000/resetpwd",{
							pwd:this.xdpwd,
  							username:localStorage.getItem("username")
						})
						.then(res => {
							if(res.data.msg == "修改成功"){
								alert("修改成功,请重新登录");
								window.location.href = "http://localhost:8080/#/login";
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.modify{
		.head{
			background: #3AAE95;
			overflow: hidden;
			height: 50/50rem;
			line-height: 50/50rem;
			div{
				float: left;
				font-size: 20/50rem;
				color:#fff;
			}
			.rou{
				margin-left: 10/50rem;
			}
			.zl{
				margin-left: 130/50rem;
			}
			.sx{
				margin-left: 80/50rem;
			}
		}
		.con{
			div{
				background: #fff;
				margin-top: 20/50rem;
				position: relative;
				input{
					width: 100%;
					height: 20/50rem;
					font-size: 16/50rem;
					padding-left: 10/50rem;
				}
			}
		}
		.bot{
			margin-top: 30/50rem;
			margin-left: 20/50rem;
			.co{
				color: #757575;
				font-size: 16/50rem;
			}
			.btn{
				width: 330/50rem;
				height: 88/50rem;
				background: #3AAE95;
				height: 50/50rem;
				text-align: center;
				line-height: 50/50rem;
				font-size: 16/50rem;
				color: #fff;
				border-radius: 10/50rem;
				margin-top: 30/50rem;
			}
		}
	}
</style>